import 'package:flutter/material.dart';

import 'animated_decorated_box1.dart';
import 'animated_decorated_box2.dart';

/// @date 2020/08/14  14:03
/// @author 程志强
/// @des 动画过渡组件

class AnimatedTranslateRoute extends StatefulWidget {
  @override
  _AnimatedTranslateRouteState createState() => _AnimatedTranslateRouteState();
}

class _AnimatedTranslateRouteState extends State<AnimatedTranslateRoute> {
  Color _decorationColor = Colors.blue;
  var duration = Duration(seconds: 1);

  double _height = 100;
  Color _color = Colors.red;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("动画过渡组件"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            AnimatedDecoratedBox1(
              duration: duration,
              decoration: BoxDecoration(color: _decorationColor),
              child: FlatButton(
                onPressed: () {
                  setState(() {
                    _decorationColor = Colors.red;
                  });
                },
                child: Text("AnimatedDecoratedBox1",
                    style: TextStyle(color: Colors.white)),
              ),
            ),
            SizedBox(
              height: 20,
            ),
            AnimatedDecoratedBox2(
              duration: duration,
              decoration: BoxDecoration(color: _decorationColor),
              child: FlatButton(
                onPressed: () {
                  setState(() {
                    _decorationColor = Colors.red;
                  });
                },
                child: Text("AnimatedDecoratedBox1",
                    style: TextStyle(color: Colors.white)),
              ),
            ),
            SizedBox(
              height: 20,
            ),
            AnimatedContainer(
              duration: const Duration(seconds: 5),
              height: _height,
              color: _color,
              child: FlatButton(
                onPressed: () {
                  setState(() {
                    _height = 150;
                    _color = Colors.blue;
                  });
                },
                child: Text(
                  "AnimatedContainer",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
